<script setup lang="tsx">
import { Form } from '@/components/Form'
import { reactive, ref, onMounted, computed } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { useAppStore } from '@/store/modules/app'
import { FormSchema } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { BaseButton } from '@/components/Button'

const appStore = useAppStore()
const formRef = ref()
const formModel = ref({})
const { t } = useI18n()
const { required } = useValidator()

const isMobile = computed(() => appStore.getMobile)

onMounted(() => {
  let test = {
    field2: true,
    field3: true,
    field4: true,
    field5: true,
    field6: true,
    field7: true
  }
  formRef.value.setValues(test)
  console.log(formRef.value, '123123')
})

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: '可选VMI物料消耗单据',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },
  {
    field: 'field2',
    label: 'VMI结算价格来源',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 },
  },{
    field: 'field3',
    label: 'VMI消耗数据合并选项',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },{
    field: 'field4',
    label: '定价时点',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },{
    field: 'field5',
    label: '消耗汇总表最大行数',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },{
    field: 'field6',
    label: '物权转移单单据状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },{
    field: 'field7',
    label: '消耗汇总表单据状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ],
      style: { width: '250px' }
    },
    colProps: { span: 24 }
  },{
    field: 'field8',
    component: 'IAgree',
    componentProps: {
      text: '按批次取价'
    },
    colProps: { span: 24 }
  }
])

const handleSubmit = async () => {
  const formData = formRef.value.formModel
  console.log('表单数据:', formData)
}
</script>

<template>
  <ContentWrap>
    <BaseButton type="primary" @click="handleSubmit" class="mb-5">保存</BaseButton>
    <Form
      ref="formRef"
      :schema="schema"
      :model="formModel"
      label-width="auto"
      :label-position="isMobile ? 'top' : 'right'"
    />
  </ContentWrap>
</template>

<style lang="less">
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;

  .text {
    position: absolute;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    line-height: 24px;
    border-radius: 50%;
    transform: translateX(-50%);
  }

  &.current {
    .text {
      color: #fff;
      background: #626aef;
    }
  }

  .holiday {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    transform: translateX(-50%);
  }
}

.transfer-footer {
  padding: 6px 5px;
  margin-left: 15px;
}

.el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
